fix: defer initial size measurement to ResizeObserver#189
fix: defer initial size measurement to ResizeObserver#189nidhiyashwanth wants to merge 1 commit intomodelcontextprotocol:mainfrom
Conversation
|
@nidhiyashwanth thanks! Though even now in the described scenario the |
|
@liady Yup, ResizeObserver should fire when async content loads. However, ResizeObserver detects DOM element dimension changes, not content changes inside elements. In the map widget case: the map renders tiles into an existing By removing the immediate call, we let ResizeObserver's first measurement happen when the app renders its intended layout, rather than capturing an empty/loading state that locks in a tiny iframe. |
|
@nidhiyashwanth got it. There might be another issue at play here - why is the |
|
@liady The iframe does have an initial CSS size (e.g., 600px in basic-host). The difference is timing: With immediate call: iframe shrinks to 110px before the map loads → map initializes in tiny container Without immediate call: iframe stays at CSS default (600px) while map loads → map initializes with room to breathe → ResizeObserver fires with actual content size → host adjusts So it's about preserving the initial "breathing room" until content is ready, rather than prematurely shrinking the container. |
|
@nidhiyashwanth exactly - so it depends on the host to provide a sensible initial size in the first place, right? Perhaps the map's div needs to have a I'm just noting that if it depends on timing then it's brittle (what if the map's script loads itself only after a 1s timeout, for example? It will still break). |
|
@liady understood. Do you have any other approach in mind? A few I could think of are:
Do you think would any of these work better, or do you have something else in mind? |
Fixes #143
Problem
setupSizeChangedNotifications()was measuring DOM size immediately afterconnect(), before async content (maps, data fetches) could load. This caused widgets to report their loading spinner height (~110px) instead of final content height, resulting in clipped content.Reproduction Flow
Solution
Remove the immediate
sendBodySizeChanged()call and rely purely onResizeObserver, which fires when content actually renders and changes size.Before (line 982)
After
Why This Works
ResizeObserveralready monitorsdocument.documentElementanddocument.bodyResizeObserverwhen it loadsTesting
npm test)npm run test:e2e)